<template>
  <!--表单组件-->
  <el-dialog 
    :close-on-click-modal="false"
    :before-close="handleBeforeClose"
    :visible="true"
    :title="title"
    width="500px"
  >
    <el-form ref="form" :model="form" size="small" label-width="150px" :disabled="disabled">
      <el-form-item label="测试前血压(mmHg)">
        <el-input type="number" v-model="form.csqXy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="测试前心率(bpm)">
        <el-input type="number" v-model="form.csqXl" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="测试后血压(mmHg)">
        <el-input type="number" v-model="form.cshXy" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="测试后心率(bpm)">
        <el-input type="number" v-model="form.cshXl" style="width: 370px;" />
      </el-form-item>
      <el-form-item label="结论">
        <el-select
          v-model="form.result"
          placeholder="请选择"
        >
          <el-option
            v-for="[key, value] in resultOptions"
            :key="value"
            :label="value"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="记录人" prop="createBy">
        <el-input v-model="form.createBy" disabled/>
      </el-form-item>
      <el-form-item label="记录日期" prop="createTime">
        <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <div>
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import CRUD, { presenter, header, form, crud } from '@crud/crud'
import {get, add, edit, del} from '@/api/trainLxjkz'
import { RATE_RESULTS } from '@/utils/constants'


const defaultForm = { id: null, trainId: null, trainItemId: null, csqXy: null, csqXl: null, cshXy: null, 
  cshXl: null, result: null, createBy: null, createTime: null }
export default {
  name: 'LxjkzDialog',
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { ...defaultForm },
      title: '离心机空战',
      resultOptions: RATE_RESULTS,
      isLoading: false
    };
  },
  created() {
      console.log("created");
      if (this.trainId !== -1) {
        get(this.trainId, this.itemId).then(response => {
          this.form = Object.assign(this.form, response);
          console.log(response, this.form);
        });
      }
    },
    updated() {
    },
    mounted() {

    },
  methods: {
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      done(); // 调用done()来关闭对话框
    },
    handleCommit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  }
}
</script>
<style scoped>
.el-input, .el-select {
  width: 300px !important;
}

</style>
